<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title><?php echo C('TITLE');?></title>
		<meta name="keywords" content="<?php echo C('KEYWORD');?>" />
		<meta name="description" content="<?php echo C('DESCRIPTION');?>" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link href="/Public/skin/css/style.css" type="text/css" rel="stylesheet" />
	</head>

	<body>
		<div class="block-center">
      <form id="VoteForm">
        <div class="main-b">
          <div class="tp-box">
            <div class="bt">
              <?php echo C('TITLE');?>
              <a class="a-link" href="javascript:void(0);" onclick="msgboxShow();">通知我</a>
            </div>
            <div class="con"><?php echo C('REMARK');?></div>
            <div class="dl-c">
              <input type="hidden" name="voteId" id="voteId">
              <?php if(is_array($vote)): $i = 0; $__LIST__ = $vote;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vote): $mod = ($i % 2 );++$i;?><dl id="vote-<?php echo ($vote["id"]); ?>">
                <dt>
                  <label>
                    <div class="ipt"><input class="voteCheckbox red" type="checkbox" value="<?php echo ($vote["id"]); ?>"></div>
                    <div class="ti"><?php echo ($vote["name"]); ?></div>
                  </label>
                </dt>
                <dd>
                  <div class="skillbar clearfix" data-percent="<?php echo ($vote["percent"]); ?>%">
                    <div class="skillbar-bar" style="background: <?php echo ($vote["color"]); ?>;"></div>
                    <div class="skill-bar-percent"><?php echo ($vote["percent"]); ?>%</div>
                  </div>
                </dd>
              </dl><?php endforeach; endif; else: echo "" ;endif; ?>
            </div>
            <div class="btn-c">
              <input type="button" class="ipt-submit" value="提交" id="VoteSubmit">
              <input type="reset" class="ipt-reset" value="重置" id="VoteReset">
            </div>
            <div class="company-right"><?php echo C('COMPANYRIGHT');?></div>
          </div>
        </div>
      </form>
		</div>

		<!--弹框-->
		<div class="reveal-modal-bg"></div>
		<a href="javascript:void(0);" id="msgboxBtn" data-reveal-id="msgboxTip"></a>
    <form id="VoteMsgboxForm">
      <input type="hidden" name="voteId" id="voteId2">
      <div id="msgboxTip" class="reveal-modal">
        <div class="close-reveal-modal">X</div>
        <div class="reveal-msgbox">
          <div class="bt">提示</div>
          <div class="dl-c">
            <dl>
              <dt>手机：</dt>
              <dd>
                <input type="text" class="ipt-txt" name="mobile" id="mobile">
              </dd>
            </dl>
            <dl>
              <dt>微信：</dt>
              <dd>
                <input type="text" class="ipt-txt" name="weixin" id="weixin">
              </dd>
            </dl>
            <dl>
              <dt>QQ：</dt>
              <dd>
                <input type="text" class="ipt-txt" name="qq" id="qq">
              </dd>
            </dl>
            <dl>
              <dt>&ensp;</dt>
              <dd class="btn-c">
                <input type="button" class="ipt-submit" value="提交" id="VoteSubmit2">
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </form>

		<script type="text/javascript" src="/Public/skin/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="/Public/skin/js/jquery.reveal.js"></script>
    <script type="text/javascript" src="/Public/javascripts/admin/jquery.form.js"></script>
    <script type="text/javascript" src="/Public/skin/layer/layer.js"></script>
    <script type="text/javascript" src="/Public/skin/functions.js"></script>
		<script type="text/javascript">
			function msgboxShow() {
				$('#msgboxBtn').trigger('click');
			}

			function msgboxHide() {
				$('.close-reveal-modal').trigger('click');
			}
      
      function skillbarInit() {
        $('.skillbar').each(function() {
        	$(this).find('.skillbar-bar').animate({
        		width: $(this).attr('data-percent')
        	}, 1500);
        });
      }
      
      //QQ号正则校验 
      function isQQ(qq) {
        var filter = /^\s*[.0-9]{5,11}\s*$/;
        if (!filter.test(qq)) return false
        return true
      }
      
      //手机号正则校验
      function isMobile(mobile) {
        var filter = /^(13[0-9]{9})|(14[0-9])|(18[0-9])|(15[0-9][0-9]{8})$/;
        if (!filter.test(mobile)) return false
        return true
      }
      
      //微信号正则校验
      function isWeixin(weixin) {
        var filter = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
        if (!filter.test(weixin)) return false
        return true
      }

			$(document).ready(function() {
        //投票条
				skillbarInit();
        
        //voteCheckbox选择事件
        $('.voteCheckbox').change(function() {
          var checkedArr = []; 
          $("input[type='checkbox']:checked").each(function() { 
              checkedArr.push($(this).val()); 
          });
          $('#voteId').val(checkedArr.join());
          $('#voteId2').val(checkedArr.join());
        });
        
        // 提交
        $("#VoteSubmit").click(function () {
          if ($("input[type='checkbox']:checked").length == 0) {
            layer.alert('请选择需要提交的选项！', {
            	icon: 2,
            	closeBtn: 0
            });
            return false;
          }
          
          if ($("input[type='checkbox']:checked").length > 3) {
            layer.alert('选择已超过3个，无法提交！', {
            	icon: 2,
            	closeBtn: 0
            });
            return false;
          }
              
        	var url = "<?php echo U('index/submit');?>";
        	$('#VoteForm').ajaxSubmit({
        		url: url,
        		type: "POST",
        		success: function (data) {
        			if (data.status) {
                var vote = data.vote;
        				$('#VoteReset').trigger('click');
        				$('#voteId').val('');
                for (var item in vote) {
                  var percent = vote[item].percent + '%';
                  $('#vote-'+ vote[item].id).find('.skillbar').attr('data-percent', percent);
                  $('#vote-'+ vote[item].id).find('.skill-bar-percent').html(percent);
                }
                skillbarInit();
        				msgboxShow();
        			} else {
        				layer.alert(data.info, {
        					icon: 2,
        					closeBtn: 0
        				});
        			}
        		}
        	});
        });
        
        $('#VoteSubmit2').click(function () {
          var mobile = $('#mobile').val();
          var weixin = $('#weixin').val();
          var qq = $('#qq').val();
          if (mobile == '' && weixin == '' && qq == '') {
            layer.alert('手机、微信、QQ至少填写一个！', {
            	icon: 2,
            	closeBtn: 0
            });
            $('#mobile').focus();
            return false;
          }
          
          if (mobile && !isMobile(mobile)) {
            layer.alert('请填写合法的手机号！', {
            	icon: 2,
            	closeBtn: 0
            });
            $('#mobile').focus();
            return false;
          }
          
          if (weixin && !isWeixin(weixin)) {
            layer.alert('请填写合法的微信号！', {
            	icon: 2,
            	closeBtn: 0
            });
            $('#weixin').focus();
            return false;
          }
          
          if (qq && !isQQ(qq)) {
            layer.alert('请填写合法的QQ号！', {
            	icon: 2,
            	closeBtn: 0
            });
            $('#qq').focus();
            return false;
          }
          
          var url = "<?php echo U('index/submit2');?>";
          $('#VoteMsgboxForm').ajaxSubmit({
          	url: url,
          	type: "POST",
          	success: function (data) {
          		if (data.status) {
                $('#mobile').val('');
                $('#weixin').val('');
                $('#qq').val('');
          			msgboxHide();
                layer.msg(data.info);
          		} else {
          			layer.alert(data.info, {
          				icon: 2,
          				closeBtn: 0
          			});
          		}
          	}
          });
        });
			});
		</script>
	</body>

</html>